<template>
	<j-page ref="page" title="首页" :tabbar="false" :navbar="false">
    <view class="tabs_page">
      <swiper class="swiper" @change="pageChange" :duration="300" :current="pageIndex">
        <swiper-item>
          <pageMain></pageMain>
        </swiper-item>
        <swiper-item>
          <pageFile></pageFile>
        </swiper-item>
        <swiper-item>
          <pageCloudFile></pageCloudFile>
        </swiper-item>
        <swiper-item>
          <pageUser></pageUser>
        </swiper-item>
      </swiper>
      <!--<u-tabbar v-model="pageIndex" :list="list"></u-tabbar>-->
      <!--   单页内的tabbar   -->
      <j-single-page-tabbar v-model="pageIndex" :list="list"></j-single-page-tabbar>
    </view>
  </j-page>
</template>

<script>
	import pageMain from "./pages/index"
  import pageUser from "./pages/user"
  import pageCloudFile from "./pages/cloud_file"
  import pageFile from "./pages/my_file"
	export default {
		components:{pageMain,pageUser,pageCloudFile,pageFile},
		data() {
			return {
        pageIndex:0,//当前页索引
        list: [{
          iconPath: "home",
          selectedIconPath: "home-fill",
          text: '捷印',
          customIcon: false,
          //pagePath: "/pages/index/index"
        },{
          iconPath: "file-text",
          selectedIconPath: "file-text-fill",
          text: '文件',
          customIcon: false,
        },{
          customPrefix:"custom-icon",
          iconPath: "cloud",
          selectedIconPath: "cloud-fill",
          text: '云',
          customIcon: false,
        },{
            iconPath: "account",
            selectedIconPath: "account-fill",
            text: '我的',
            customIcon: false,
            count: 0,
          },
        ]
			}
		},
		onLoad() {

		},
    created(){
    },
		methods: {
		  //swiper切换
      pageChange({detail}){
        this.pageIndex = detail.current
      },
      //用于修改tabbar的Count，提供给各个tabbar页面
      updateTabCount(index,count){
         this.list[index].count = count;
      }
		}
	}
</script>

<style>
.tabs_page{
  height: 100vh;
  width: 100vw;
  display: flex;
  flex-direction: column;
}


	.swiper{
		width: 100vw;
    flex: auto;
	}
	.swiper-item{
		width: 100%;
		height: 100%;
	}
	.uni-bg-red{
		background-color: red;
	}
	.uni-bg-green{
		background-color: green;
	}
	.uni-bg-blue{
		background-color: blue;
	}

	.tabbar{
		display: flex;
		height: 10vh;
		width: 100vw;
	}

	.tabbar_item{
		flex: 1;
		text-align: center;
	}
</style>
